<template>
  <div>
    <van-nav-bar @click-left="onClickLeft" left-arrow title="注册" />
    <van-form ref="form" style="margin-top: 40px">
      <van-cell-group inset>
        <van-field
          v-model="userInput.accounta"
          placeholder="输入手机号(登录账号)"
          :rules="phoneRules"
        >
          <template #left-icon>
            <img src="../../assets/img/iphone.png" alt="" />
          </template>
        </van-field>
        <van-field
          v-model="userInput.passworda"
          placeholder="设置密码"
          :rules="passwordRules"
          type="password"
        >
          <template #left-icon>
            <img src="../../assets/img/pwd.png" alt="" />
          </template>
        </van-field>
        <van-field
          v-model="userInput.rePassword"
          name="rePassword"
          placeholder="确认密码"
          :rules="rePasswordRules"
          type="password"
        >
          <template #left-icon>
            <img src="../../assets/img/pwd1.png" alt="" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block native-type="submit" @click="formSubmit">
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { ref } from "vue";
import ZhuceApi from "../../http/apis/ZhuceApi";
import { showNotify } from "vant";
import "vant/es/notify/style";
import router from "@/router";

export default {
  setup() {
    const onClickLeft = () => history.back();

    //用户输入
    let userInput = ref({
      accounta: "",
      passworda: "",
      rePassword: "",
    });

    //表单验证
    let form = ref();
    //手机号验证
    let phoneRules = ref([
      {
        required: true,
        message: "必填",
      },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "手机号格式不正确",
      },
    ]);
    //密码验证
    let passwordRules = ref([
      { required: true, message: "必填" },
      {
        pattern: /^.{6,12}$/,
        message: "密码长度为6-12位",
      },
      {
        pattern: /^[A-Za-z0-9!@#$%^&*()_+-]*$/,
        message: "密码只能是字母、数字和!@#$%^&*()_+-",
      },
      {
        validator: (val) => {
          if (val && userInput.value.rePassword) {
            form.value
              .validate("rePassword")
              .then((result) => console.log(result))
              .catch((err) => console.log(err));
          }
        },
      },
    ]);
    //重复密码验证
    let rePasswordRules = ref([
      { required: true, message: "必填" },
      {
        validator: (val) => {
          if (val !== userInput.value.passworda) return "输入的密码与上次不符";
        },
      },
    ]);

    //数据提交
    function formSubmit() {
      form.value
        .validate()
        .then((result) => {
          if (result) return;
          let params = {
            accounta: userInput.value.accounta,
            passworda: userInput.value.passworda,
          };
          ZhuceApi.insertUserInfo(params).then((res) => {
            if (res.data.code === 200) {
              showNotify({ type: "success", message: res.data.msg });
              router.push("/login");
            }
          });
        })
        .catch((err) => showNotify({ type: "danger", message: err.message }));
    }

    return {
      onClickLeft,
      userInput,
      phoneRules,
      passwordRules,
      rePasswordRules,
      form,
      formSubmit,
    };
  },
};
</script>

<style lang="scss" scoped>
button {
  width: 250px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid black;
  background-color: rgba(255, 209, 26, 0.942);
  color: white;
  font-size: 15px;
  margin: auto;
}

::v-deep .van-field__control {
  outline: none;
  border: 1px solid #ccc;
  font-size: 10px;
  width: 250px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  margin-bottom: 10px;
  &:focus {
    border-color: blue;
  }
}
::v-deep .van-field__error-message {
  position: absolute;
  height: 20px;
  margin-top: -8px;
}
.van-cell {
  height: 70px;
}
img {
  width: 30px;
}
</style>
